<template>
	<div class="main real-box">
		<div class="top-panel">
			<div class="search-pane">
				<div class="search-item-box">
					<a-select size="small" style="width: 200px"></a-select>
				</div>
				<div class="search-item-box">
					<a-select size="small" style="width: 200px"></a-select>
				</div>
				<div class="search-item-box">
					<a-select size="small" style="width: 200px"></a-select>
				</div>
				<div class="search-item-box">
					<a-button type="primary" ghost size="small">查询</a-button>
				</div>
				<div class="search-item-box">
					<a-button type="default" class="reset-btn" size="small">重置</a-button>
				</div>
			</div>
			<div class="btn">
				<a-button type="primary" @click="addStation">添加</a-button>
			</div>
		</div>
		<div class="table-box">
			<SpearTable :spear-entities="data" :total="page.total" @changePage="changePage" @edit="editSpear" @status="setStatus"></SpearTable>
		</div>
		<AddSpear ref="spear" :title="title" :id="id" @reloadList="queryList"></AddSpear>
		<!--修改充电枪状态-->
		<a-modal v-model:visible="statusVisible" title="设置电站" @ok="saveStatus">
			<a-radio-group v-model:value="status">
				<a-radio :style="{height: '30px', lineHeight: '30px'}" :value="1">空闲</a-radio>
				<a-radio :style="{height: '30px', lineHeight: '30px'}" :value="2">使用</a-radio>
				<a-radio :style="{height: '30px', lineHeight: '30px'}" :value="3">离线</a-radio>
			</a-radio-group>
			<div class="radio-box">
				<div class="radio-box-item">电站在运营过程中会根据实际情况适时调整：</div>
				<div class="radio-box-item">1、维护则是表示电站未开启或者需要维护保养状态，无法提供充电服务</div>
				<div class="radio-box-item">2、开启则是表示电站良好，可以正常运营和提供充电服务</div>
			</div>
		</a-modal>
	</div>
</template>

<script>
import AddSpear from "@/view/spear/components/AddSpear";
import {api, post} from "@/api/api";
import moment from "moment";
import SpearTable from "../../components/SpearTable";

export default {
	name: "SpearList",
	components: {SpearTable, AddSpear},
	data() {
		return {
			topDrawer: false,
			page: {
				current: 1,
				pageSize: 20,
				total: 0,
			},
			id: '', // 编辑时的电站Id
			loading: true,
			data: [],
			title: '',
			moment,
			statusVisible: false,
			status: 1, // 充电枪状态
		}
	},
	created() {
		this.queryList ()
	},
	methods: {
		queryList() {
			post ( api.SpearEntities, {page: this.page.current, limit: this.page.pageSize} ).then ( res => {
				this.data = res.data.data
				this.page.total = res.data.count
			} )
		},
		editSpear( id ) {
			this.title = '编辑充电枪'
			this.$refs.spear.show (id)
		},
		deleteStation( id ) {
			console.log ( id )
		},
		// 修改状态
		setStatus(spear){
			this.statusVisible = true
			this.status = spear.status
			this.id = spear.id
		},
		saveStatus(){
			let that = this
			that.$confirm({
				title: '提示',
				content: '确定此操作吗？',
				okText: '确认',
				cancelText: '取消',
				type: 'warning',
				showCancel: false,
				onOk() {
					post ( api.UpdateSpear, {id: that.id, status: that.status} ).then ( res => {
						that.statusVisible = false
						that.queryList()
					} )
				},
				onCancel() {
				}
			})
		},
		addStation() {
			this.title = '添加充电桩'
			this.$refs.spear.show ()
		},
		changePage(pageInfo){
			this.page.current = pageInfo.page
			this.page.pageSize = pageInfo.pageSize
			this.queryList()
		}
	}
}
</script>

<style lang="less" scoped>
@import "../../static/spearList";
</style>
